<template>
  <a-card :bordered="false">
    <!-- 查询区域 -->
    <div class="table-page-search-wrapper">
      <a-form layout="inline" @keyup.enter.native="loadData">
        <a-row :gutter="24">
          <a-col :xl="5" :lg="7" :md="8" :sm="24">
            <a-form-item label="设备名称">
              <a-input v-model="queryParam.deviceName" placeholder="请输入设备名称"/>
            </a-form-item>
          </a-col>
          <a-col :xl="5" :lg="7" :md="8" :sm="24">
            <a-form-item label="设备ID">
              <a-input v-model="queryParam.deviceId" placeholder="请输入设备ID"/>
            </a-form-item>
          </a-col>
          <a-col :xl="5" :lg="7" :md="8" :sm="24">
            <a-form-item label="采购时间">
              <a-range-picker v-model="queryParam.datetime" @change="onPurchaseDateChange"/>
            </a-form-item>
          </a-col>
          <a-col :xl="4" :lg="7" :md="8" :sm="24">
            <a-form-item label="设备状态">
              <j-search-select-tag
                placeholder="请选择设备状态"
                v-model="queryParam.deviceUseStatus"
                dict="device_use_status"
              />
            </a-form-item>
          </a-col>
          <a-col :xl="4" :lg="7" :md="8" :sm="24">
            <a-form-item label="使用部门">
              <j-select-depart placeholder="请选择使用部门" v-model="queryParam.deviceUseDeptId"/>
            </a-form-item>
          </a-col>
          <a-col :xl="5" :lg="7" :md="8" :sm="24">
            <a-form-item label="使用负责人">
              <j-select-user-by-dep placeholder="请选择使用负责人" v-model="queryParam.deviceUseUserId"/>
            </a-form-item>
          </a-col>
          <a-col :xl="4" :lg="7" :md="8" :sm="24">
            <span style="float: left;overflow: hidden;" class="table-page-search-submitButtons">
              <a-button type="primary" @click="loadData" icon="search" style="margin-left: 8px">查询</a-button>
              <a-button type="primary" @click="searchReset" icon="reload" style="margin-left: 8px">重置</a-button>
              <a @click="handleToggleSearch" style="margin-left: 8px">
                {{ toggleSearchStatus ? '收起' : '展开' }}
                <a-icon :type="toggleSearchStatus ? 'up' : 'down'"/>
              </a>
            </span>
          </a-col>
        </a-row>
      </a-form>
    </div>
    <!-- 查询区域-END -->

    <!-- 操作按钮区域 -->
    <!-- <div
      class="table-operator"
      style="display: flex;justify-content: space-between;height: 200px;margin:10px 0px;align-items: center;"
    >
      <div style="width: 20%;">
        <div
          style="border-radius: 12px;border:1px solid #ccc;display: flex;align-items: center;justify-content: space-around;"
        >
          <div style="height:100px;width:220px;" id="echart-usestate"></div>
          <div>
            <p style="color:#000;font-size: 18px;">{{ userate }}</p>
            <span>使用率</span>
          </div>
        </div>
      </div>
      <div style="width: 50%;">
        <div style="height:200px;width:100%;" id="echart-dept"></div>
      </div>
      <div style="width: 20%;">
        <div style="height:200px;width:100%;" id="echart-state"></div>
      </div>
    </div> -->

    <div class="table-operator" style="display: flex; justify-content: space-between; height: 200px; margin: 10px 0; align-items: center;">
  <div style="flex: 1;">
    <!-- 使用率饼图 -->
    <div style="border-radius: 12px; border: 1px solid #ccc; display: flex; align-items: center; justify-content: space-around;">
      <div style="height: 100px; width: 100%; max-width: 220px;  "   id="echart-usestate"></div>

      <div style="display: flex; flex-direction: column; justify-content: center; padding-top: 10px;">
        <span>使用率</span>
        <p style="color: #000; font-size: 18px; margin: 0;">{{ userate }}</p>
      </div>
    </div>
  </div>
  <div style="flex: 2;">
    <!-- 各部门设备数量 -->
    <div style="height: 200px; width: 100%;" id="echart-dept"></div>
  </div>
  <div style="flex: 1;">
    <!-- 设备使用状态柱状图 -->
    <div style="height: 200px; width: 100%;" id="echart-state"></div>
  </div>
</div>

    <div>
      <a-button @click="handleAdd" type="primary" icon="plus" style="margin-left: 8px;margin-top: 10px;margin-bottom: 10px">新增</a-button>
      <a-upload
        name="file"
        :showUploadList="false"
        :multiple="false"
        :headers="tokenHeader"
        :action="importExcelUrl"
        @change="handleImportExcel"
      >
        <a-button type="primary" icon="import" style="margin-left: 8px">导入</a-button>
      </a-upload>
      <a-button type="primary" icon="download" @click="handleExportXls('设备台账')"
                style="margin-left: 8px">导出</a-button>
    </div>

    <!-- table区域-begin -->
    <div>
      <div class="ant-alert ant-alert-info" style="margin-bottom: 16px;">
        <i class="anticon anticon-info-circle ant-alert-icon"></i> 已选择
        <a style="font-weight: 600">{{ selectedRowKeys.length }}</a
        >项
        <a style="margin-left: 24px" @click="onClearSelected">清空</a>
        <span style="float:right;">
          <a-popover title="自定义列" trigger="click" placement="leftBottom">
            <template slot="content">
              <a-checkbox-group @change="onColSettingsChange" v-model="settingColumns" :defaultValue="settingColumns">
                <a-row style="width: 400px">
                  <template v-for="(item,index) in defColumns">
                    <template v-if="item.key!=='rowIndex'&& item.dataIndex!=='action'">
                        <a-col :span="12"><a-checkbox :value="item.dataIndex"><j-ellipsis :value="item.title" :length="10"></j-ellipsis></a-checkbox></a-col>
                    </template>
                  </template>
                </a-row>
              </a-checkbox-group>
            </template>
            <a><a-icon type="setting" />设置</a >
          </a-popover>
        </span>

      </div>

      <a-table
        ref="table"
        size="middle"
        :scroll="{ x: true }"
        bordered
        rowKey="id"
        :columns="columns"
        :dataSource="dataSource"
        :pagination="ipagination"
        :loading="loading"
        :rowSelection="{ selectedRowKeys: selectedRowKeys, onChange: onSelectChange }"
        class="j-table-force-nowrap1"
        @change="handleTableChange"
      >
        <template slot="htmlSlot" slot-scope="text">
          <div v-html="text"></div>
        </template>
        <template slot="imgSlot" slot-scope="text, record">
          <span v-if="!text" style="font-size: 12px;font-style: italic;">无图片</span>
          <img
            v-else
            :src="getImgView(text)"
            :preview="record.id"
            height="25px"
            alt=""
            style="max-width:80px;font-size: 12px;font-style: italic;"
          />
        </template>
        <template slot="fileSlot" slot-scope="text">
          <span v-if="!text" style="font-size: 12px;font-style: italic;">无文件</span>
          <a-button v-else :ghost="true" type="primary" icon="download" size="small" @click="downloadFile(text)">
            下载
          </a-button>
        </template>

        <span slot="action" slot-scope="text, record">
          <a @click="handleDeviceQrcode(record)">
            <svg
              t="1717646069947"
              class="icon"
              viewBox="0 0 1024 1024"
              version="1.1"
              xmlns="http://www.w3.org/2000/svg"
              p-id="1476"
              width="20"
              height="20"
              style="position: relative;top:5px;"
              title="设备二维码"
            >
              <path
                d="M224 416.096V224l192-0.096 0.096 192.096L224 416.096zM416.096 160H223.904A64 64 0 0 0 160 223.904v192.192A64 64 0 0 0 223.904 480h192.192A64 64 0 0 0 480 416.096V223.904A64 64 0 0 0 416.096 160zM224 800.096V608l192-0.096 0.096 192.096L224 800.096zM416.096 544H223.904A64 64 0 0 0 160 607.904v192.192A64 64 0 0 0 223.904 864h192.192A64 64 0 0 0 480 800.096v-192.192A64 64 0 0 0 416.096 544zM608 416.096V224l192-0.096 0.096 192.096-192.096 0.096zM800.096 160h-192.192A64 64 0 0 0 544 223.904v192.192A64 64 0 0 0 607.904 480h192.192A64 64 0 0 0 864 416.096V223.904A64 64 0 0 0 800.096 160zM704 608a32 32 0 0 0-32 32v192a32 32 0 0 0 64 0v-192a32 32 0 0 0-32-32M576 608a32 32 0 0 0-32 32v192a32 32 0 0 0 64 0v-192a32 32 0 0 0-32-32M832 544a32 32 0 0 0-32 32v256a32 32 0 0 0 64 0v-256a32 32 0 0 0-32-32"
                fill="#0a7dbf"
                p-id="1477"
              ></path>
            </svg>
          </a>
          <a-divider type="vertical"/>
          <a @click="handleEdit(record)">编辑</a>

          <a-divider type="vertical"/>
          <a @click="handleDeviceDetail(record)">详情</a>
          <a-divider type="vertical"/>
          <a-popconfirm title="确定删除吗?" @confirm="() => handleDelete(record.id)">
            <a>删除</a>
          </a-popconfirm>
          <!-- <a-dropdown>
              <a class="ant-dropdown-link">更多 <a-icon type="down" /></a>
              <a-menu slot="overlay">
                <a-menu-item>
                  <a @click="handleDetail(record)">详情</a>
                </a-menu-item>
                <a-menu-item>
                  <a-popconfirm title="确定删除吗?" @confirm="() => handleDelete(record.id)">
                    <a>删除</a>
                  </a-popconfirm>
                </a-menu-item>
              </a-menu>
            </a-dropdown> -->
        </span>

        <template slot="expandIcon" slot-scope="props">
          <a-icon
            v-if="props.record.eneDeviceLowers && props.record.eneDeviceLowers.length > 0"
            type="plus"
            @click="e => props.onExpand(props.record, e)"
          />
          <span v-else style="display:inline-block;width:14px;"></span>
        </template>

        <template slot="expandedRowRender" slot-scope="record">
          <div class="expanded-content">
            <a-table
              :columns="innerColumns"
              :data-source="record.eneDeviceLowers"
              :pagination="false"
              rowKey="id"
              bordered
            />
          </div>
        </template>
      </a-table>
    </div>

    <ene-device-modal ref="modalForm" @ok="modalFormOk"></ene-device-modal>
    <ene-device-detail-modal ref="modalDetail"></ene-device-detail-modal>
    <ene-device-qrcode-modal ref="modalDetailQrcode"></ene-device-qrcode-modal>
  </a-card>
</template>

<script>
import '@/assets/less/TableExpand.less'
import {mixinDevice} from '@/utils/mixin'
import {JeecgListMixin} from '@/mixins/JeecgListMixin'
import EneDeviceModal from './modules/EneDeviceModal'
import EneDeviceDetailModal from './modules/EneDeviceDetailModal'
import EneDeviceQrcodeModal from './modules/EneDeviceQrcodeModal'
import {filterMultiDictText} from '@/components/dict/JDictSelectUtil'
import {httpAction, getAction} from '@/api/manage'
import * as echarts from 'echarts'

export default {
  name: 'EneDeviceList',
  mixins: [JeecgListMixin, mixinDevice],
  components: {
    EneDeviceModal,
    EneDeviceDetailModal,
    EneDeviceQrcodeModal
  },
  data() {
    return {
      description: '设备管理管理页面',
      // 表头
      columns: [
        {
          title: '#',
          dataIndex: '',
          key: 'rowIndex',
          width: 60,
          align: 'center',
          customRender: function (t, r, index) {
            return parseInt(index) + 1
          }
        },
        {
          title: '设备名称',
          align: 'center',
          dataIndex: 'deviceName',
          sorter: (a, b) => a.deviceName.localeCompare(b.deviceName),
        },
        {
          title: '设备ID',
          align: 'center',
          dataIndex: 'deviceId',
          sorter: (a, b) => a.deviceId - b.deviceId,
        },
        {
          title: '产品',
          align: 'center',
          dataIndex: 'deviceProductId',
          sorter: (a, b) => a.deviceProductId - b.deviceProductId,
        },
        {
          title: '型号',
          align: 'center',
          dataIndex: 'deviceTypeId_dictText',
          sorter: (a, b) => a.deviceTypeId - b.deviceTypeId,
        },
        {
          title: '品牌',
          align: 'center',
          dataIndex: 'deviceBrandId',
          sorter: (a, b) => a.deviceBrandId - b.deviceBrandId,
        },
        // {
        //   title:'采购部门',
        //   align:"center",
        //   dataIndex: 'devicePurchaseDeptId_dictText'
        // },
        // {
        //   title:'采购人',
        //   align:"center",
        //   dataIndex: 'devicePurchaseUserId_dictText'
        // },
        {
          title: '采购日期',
          align: 'center',
          dataIndex: 'devicePurchaseDate',
          sorter: (a, b) => {
            const aTime = new Date(a.devicePurchaseDate).getTime();
            const bTime = new Date(b.devicePurchaseDate).getTime();
            return aTime - bTime;
          },
        },
        {
          title: '使用部门',
          align: 'center',
          dataIndex: 'deviceUseDeptId_dictText',
          sorter: (a, b) => a.deviceUseDeptId - b.deviceUseDeptId,
        },
        {
          title: '使用负责人',
          align: 'center',
          dataIndex: 'deviceUseUserId_dictText',
          sorter: (a, b) => a.deviceUseUserId - b.deviceUseUserId,
        },
        {
          title: '在线状态',
          align: 'center',
          dataIndex: 'deviceStatus_dictText',
          sorter: (a, b) => a.deviceStatus - b.deviceStatus,
        },
        {
          title: '使用状态',
          align: 'center',
          dataIndex: 'deviceUseStatus_dictText',
          sorter: (a, b) => a.deviceUseStatus - b.deviceUseStatus,
        },
        {
          title: '购置方式',
          align: 'center',
          dataIndex: 'acquisitionMethod',
          sorter: (a, b) => a.acquisitionMethod - b.acquisitionMethod,
        },
        {
          title: '资产净值',
          align: 'center',
          dataIndex: 'assetNetValue',
          sorter: (a, b) => a.assetNetValue - b.assetNetValue,
        },
        {
          title: '资产原值',
          align: 'center',
          dataIndex: 'assetOriginalValue',
          sorter: (a, b) => a.assetOriginalValue - b.assetOriginalValue,
        },
        // {
        //   title:'设备位置',
        //   align:"center",
        //   dataIndex: 'devicePosition'
        // },
        // {
        //   title:'备注',
        //   align:"center",
        //   dataIndex: 'deviceRemarks'
        // },
        // {
        //   title:'设备图片',
        //   align:"center",
        //   dataIndex: 'deviceImages',
        //   scopedSlots: {customRender: 'imgSlot'}
        // },
        {
          title: '操作',
          dataIndex: 'action',
          align: 'center',
          width: 147,
          scopedSlots: {customRender: 'action'}
        }
      ],
      settingColumns: [],
      defColumns: [
        {
          title: '#',
          dataIndex: '',
          key: 'rowIndex',
          width: 60,
          align: 'center',
          customRender: function (t, r, index) {
            return parseInt(index) + 1
          }
        },
        {
          title: '设备名称',
          align: 'center',
          dataIndex: 'deviceName',
          sorter: (a, b) => a.deviceName.localeCompare(b.deviceName),
        },
        {
          title: '设备ID',
          align: 'center',
          dataIndex: 'deviceId',
          sorter: (a, b) => a.deviceId - b.deviceId,
        },
        {
          title: '产品',
          align: 'center',
          dataIndex: 'deviceProductId',
          sorter: (a, b) => a.deviceProductId - b.deviceProductId,
        },
        {
          title: '型号',
          align: 'center',
          dataIndex: 'deviceTypeId_dictText',
          sorter: (a, b) => a.deviceTypeId - b.deviceTypeId,
        },
        {
          title: '品牌',
          align: 'center',
          dataIndex: 'deviceBrandId',
          sorter: (a, b) => a.deviceBrandId - b.deviceBrandId,
        },
        // {
        //   title:'采购部门',
        //   align:"center",
        //   dataIndex: 'devicePurchaseDeptId_dictText'
        // },
        // {
        //   title:'采购人',
        //   align:"center",
        //   dataIndex: 'devicePurchaseUserId_dictText'
        // },
        {
          title: '采购日期',
          align: 'center',
          dataIndex: 'devicePurchaseDate',
          sorter: (a, b) => {
            const aTime = new Date(a.devicePurchaseDate).getTime();
            const bTime = new Date(b.devicePurchaseDate).getTime();
            return aTime - bTime;
          },
        },
        {
          title: '使用部门',
          align: 'center',
          dataIndex: 'deviceUseDeptId_dictText',
          sorter: (a, b) => a.deviceUseDeptId - b.deviceUseDeptId,
        },
        {
          title: '使用负责人',
          align: 'center',
          dataIndex: 'deviceUseUserId_dictText',
          sorter: (a, b) => a.deviceUseUserId - b.deviceUseUserId,
        },
        {
          title: '在线状态',
          align: 'center',
          dataIndex: 'deviceStatus_dictText',
          sorter: (a, b) => a.deviceStatus - b.deviceStatus,
        },
        {
          title: '使用状态',
          align: 'center',
          dataIndex: 'deviceUseStatus_dictText',
          sorter: (a, b) => a.deviceUseStatus - b.deviceUseStatus,
        },
        {
          title: '购置方式',
          align: 'center',
          dataIndex: 'acquisitionMethod',
          sorter: (a, b) => a.acquisitionMethod - b.acquisitionMethod,
        },
        {
          title: '资产净值',
          align: 'center',
          dataIndex: 'assetNetValue',
          sorter: (a, b) => a.assetNetValue - b.assetNetValue,
        },
        {
          title: '资产原值',
          align: 'center',
          dataIndex: 'assetOriginalValue',
          sorter: (a, b) => a.assetOriginalValue - b.assetOriginalValue,
        },
        // {
        //   title:'设备位置',
        //   align:"center",
        //   dataIndex: 'devicePosition'
        // },
        // {
        //   title:'备注',
        //   align:"center",
        //   dataIndex: 'deviceRemarks'
        // },
        // {
        //   title:'设备图片',
        //   align:"center",
        //   dataIndex: 'deviceImages',
        //   scopedSlots: {customRender: 'imgSlot'}
        // },
        {
          title: '操作',
          dataIndex: 'action',
          align: 'center',
          width: 147,
          scopedSlots: {customRender: 'action'}
        }
      ],
      innerColumns: [
        {
          title: '设备名称',
          align: 'center',
          dataIndex: 'deviceName',
          sorter: (a, b) => a.deviceName.localeCompare(b.deviceName),
        },
        {
          title: '设备ID',
          align: 'center',
          dataIndex: 'deviceId',
          sorter: (a, b) => a.deviceId - b.deviceId,
        },
        {
          title: '产品',
          align: 'center',
          dataIndex: 'deviceProductId',
          sorter: (a, b) => a.deviceProductId - b.deviceProductId,
        },
        {
          title: '型号',
          align: 'center',
          dataIndex: 'deviceTypeId_dictText',
          sorter: (a, b) => a.deviceTypeId - b.deviceTypeId,
        },
        {
          title: '品牌',
          align: 'center',
          dataIndex: 'deviceBrandId',
          sorter: (a, b) => a.deviceBrandId - b.deviceBrandId,
        },
        {
          title: '采购日期',
          align: 'center',
          dataIndex: 'devicePurchaseDate',
          sorter: (a, b) => {
            const aTime = new Date(a.devicePurchaseDate).getTime();
            const bTime = new Date(b.devicePurchaseDate).getTime();
            return aTime - bTime;
          },
        },
        {
          title: '购置方式',
          align: 'center',
          dataIndex: 'acquisitionMethod',
          sorter: (a, b) => a.acquisitionMethod - b.acquisitionMethod,
        },
      ],
      url: {
        list: '/device/eneDevice/list',
        statis: '/device/eneDevice/statis',
        delete: '/device/eneDevice/delete',
        deleteBatch: '/device/eneDevice/deleteBatch',
        exportXlsUrl: '/device/eneDevice/exportXls',
        importExcelUrl: '/device/eneDevice/importExcel'
      },
      dictOptions: {},
      superFieldList: [],
      queryParam: {
        deviceName: null,
        deviceId: null
      },
      userate: '0%',
      count: 0,
      usecount: 0
    }
  },
  created() {
    this.getSuperFieldList()
    this.loadData()
  },
  computed: {
    importExcelUrl: function () {
      return `${window._CONFIG['domianURL']}/${this.url.importExcelUrl}`
    }
  },
  methods: {
    initDictConfig() {
    },
    getSuperFieldList() {
      let fieldList = []
      fieldList.push({type: 'string', value: 'deviceName', text: '设备名称', dictCode: ''})
      fieldList.push({type: 'string', value: 'deviceId', text: '设备ID', dictCode: ''})
      fieldList.push({
        type: 'sel_search',
        value: 'deviceProductId',
        text: '产品',
        dictTable: 'ene_device_product',
        dictText: 'device_product_name',
        dictCode: 'id'
      })
      fieldList.push({
        type: 'sel_search',
        value: 'deviceTypeId',
        text: '型号',
        dictTable: 'ene_device_type',
        dictText: 'device_type_name',
        dictCode: 'id'
      })
      fieldList.push({
        type: 'string',
        value: 'deviceBrandId',
        text: '品牌',
        dictTable: 'ene_device_brand',
        dictText: 'brand_name',
        dictCode: 'id'
      })
      fieldList.push({type: 'int', value: 'deviceStatus', text: '在线状态', dictCode: ''})
      fieldList.push({type: 'sel_depart', value: 'devicePurchaseDeptId', text: '采购部门'})
      fieldList.push({type: 'sel_user', value: 'devicePurchaseUserId', text: '采购人'})
      fieldList.push({type: 'datetime', value: 'devicePurchaseDate', text: '采购日期'})
      fieldList.push({type: 'sel_depart', value: 'deviceUseDeptId', text: '使用部门'})
      fieldList.push({type: 'sel_user', value: 'deviceUseUserId', text: '使用负责人'})
      fieldList.push({type: 'string', value: 'devicePosition', text: '设备位置', dictCode: ''})
      fieldList.push({type: 'string', value: 'deviceRemarks', text: '备注', dictCode: ''})
      fieldList.push({type: 'string', value: 'deviceImages', text: '设备图片', dictCode: ''})
      this.superFieldList = fieldList
    },
    handleDeviceDetail(record) {
      this.$refs.modalDetail.detail(record)
    },
    handleDeviceQrcode(record) {
      this.$refs.modalDetailQrcode.detail(record)
    },
    changeWorkshop(...e) {
      this.checkedNodesIds = e
      this.loadData()
    },
    loadData() {
      if (this.checkedNodesIds && this.checkedNodesIds.length > 0)
        this.queryParam.queryBrandTypeIds = this.checkedNodesIds.join(',')
      let obj = {...this.queryParam}
      obj.deviceName = (this.queryParam.deviceName == '' ? null : this.queryParam.deviceName)
      obj.deviceId = (this.queryParam.deviceId == '' ? null : this.queryParam.deviceId)
      obj.pageNo = this.ipagination.current;
      obj.pageSize = this.ipagination.pageSize;
      getAction(this.url.list, obj).then(res => {
        if (res.success) {
          this.dataSource = res.result.records
          this.ipagination.total = res.result.total
        }
      })
      getAction(this.url.statis, this.queryParam).then(res => {
        if (res.success) {
          this.userate = (Number.parseFloat(res.result.userate) * 100.0).toFixed(2) + '%'
          this.usecount = res.result.usecount
          this.count = res.result.count
          ;(() => {
            var chartDom = document.getElementById('echart-usestate')
            var myChart = echarts.init(chartDom)
            var option = {
              color: ['rgb(119,121,249)', 'rgb(248,194,38)'],
              tooltip: {
                trigger: 'item'
              },
              legend: {
                left: 'right',
                top: '30%',
                orient: 'vertical'
              },
              grid: {
                left: '0%'
              },
              series: [
                {
                  type: 'pie',
                  radius: ['35%', '70%'],
                  avoidLabelOverlap: false,
                  padAngle: 5,
                  itemStyle: {
                    borderRadius: 10
                  },
                  label: {
                    show: false,
                    position: 'left'
                  },
                  emphasis: {
                    label: {
                      show: false,
                      fontSize: 40,
                      fontWeight: 'bold'
                    }
                  },
                  labelLine: {
                    show: false
                  },
                  data: [
                    {value: res.result.usecount, name: '使用中'},
                    {value: Number.parseInt(res.result.count - res.result.usecount), name: '未使用'}
                  ]
                }
              ]
            }
            option && myChart.setOption(option)
          })()
          ;(() => {
            var chartDom = document.getElementById('echart-dept')
            var myChart = echarts.init(chartDom)
            var option = {
              color: ['rgb(85,84,247)', 'rgb(229,129,58)', 'rgb(248,194,38)'],
              title: {
                text: '设备数量',
                left: 'center'
              },
              grid: {
                top: '20%',
                bottom: '10%'
              },
              xAxis: {
                type: 'category',
                data: res.result.deptDeviceStatis.map(t => t.depart_name==null? "空":t.depart_name)
              },
              yAxis: {
                type: 'value'
              },
              series: [
                {
                  data: res.result.deptDeviceStatis.map(t => t.count),
                  type: 'bar',
                  barMaxWidth: 30,
                  label: {
                    show: true
                  }
                },
                {
                  type: 'line',
                  data: res.result.deptDeviceStatis.map(t => t.count)
                }
              ]
            }
            option && myChart.setOption(option)
          })()
          ;(() => {
            var chartDom = document.getElementById('echart-state')
            var myChart = echarts.init(chartDom)

            var option = {
              color: ['rgb(85,84,247)', 'rgb(166,169,251)', 'rgb(248,194,38)'],
              grid: {
                top: '20%',
                bottom: '10%'
              },
              yAxis: {
                type: 'category',
                data: res.result.useStateStatis.map(t => t.item_text)
              },
              xAxis: {
                type: 'value'
              },
              series: [
                {
                  data: res.result.useStateStatis.map(t => t.count),
                  type: 'bar',
                  barMaxWidth: 30,
                  label: {
                    show: true
                  }
                }
              ]
            }
            option && myChart.setOption(option)
          })()
        }
      })
    },
    onPurchaseDateChange(date, dateString) {
      if (!dateString || dateString.length <= 0) return
      this.queryParam.devicePurchaseDate1 = dateString[0]
      this.queryParam.devicePurchaseDate2 = dateString[1]
    }
  }
}
</script>
<style lang="less" scoped>
@import '~@assets/less/common.less';

/deep/ .ant-modal {
  width: 1200px !important;
}

/deep/ .remarks .ant-form-item-label,
/deep/ .images .ant-form-item-label {
  width: 80px;
}
.expanded-content {
  padding: 2px;
  background: #fafafa;
  margin:2px 0;
}
</style>
